React 文档
各章主题一览(01~19)
| 序号 | 文件 | 主题 |
|---|---|---|
| 01 | 本文 | 入门、核心特性 |
| 02 | Props·State·类组件与函数组件 | props/state、组件形态 |
| 03 | State·setState·不可变数据·Refs 与 super | 状态修改、渲染、refs、super |
| 04 | 生命周期 | 类组件钩子、useEffect 对照 |
| 05 | Hooks | 内置/自定义 Hook、规则 |
| 06 | 虚拟 DOM·JSX·Diff·key | VDOM、JSX、diff、key |
| 07 | Fiber·协调·并发·React18 | Fiber、并发、批处理与 Transition |
| 08 | 事件·表单·受控与非受控 | 合成事件、表单 |
| 09 | 组件通信·组合 | 通信模式、插槽式组合 |
| 10 | 高阶组件 HOC | HOC 模式 |
| 11 | 路由 | 路由原理与各版本差异 |
| 12 | 错误边界 | Error Boundary、异常捕获 |
| 13 | CSS·DOM·Mock | 样式、DOM、Mock |
| 14 | 性能优化 | 渲染优化、构建、HTTP、懒加载等 |
| 15 | 服务端渲染 SSR | SSR 概念与实践要点 |
| 16 | 版本演进 React15~19 | 各版本关键词 |
| 17 | 底层原理专题 | Fiber/JSX/事件/diff/render 专题合集 |
| 18 | 状态管理 | Redux 全家桶与 Zustand |
| 19 | 附录 | 知识体系导图与提要 |
什么是 react
- react 是 Facebook 开发的用于构建用户界面的 JavaScript 库,
- 通过 “JSX 声明式模板” 扩展 html 结构
- 通过 “组件化” 拆分复杂 UI
- 通过 “虚拟 DOM + Diffing” 优化性能
- 通过 “单向数据流” 保证可维护性
- 再配合丰富的生态工具:vite、webpack、 React Router、redux、AntDesign 等工具,开发复杂的SPA 单页应用
注意
react 不是 MVVM模式,而是基于状态的声明式 UI 库,因为 react 是通过 setState 方法来改变状态触发视图更新,而不是数据变化自动更新
说说你对 react 的理解以及核心特性?
回答
shell
React 是由 Facebook(现 Meta)开发的用于 构建用户界面 的前端 JavaScript 库
React 的设计理念围绕「组件化」和「声明式编程」展开,让复杂 UI 的开发、维护更简单。
react 的核心特性有:声明式、组件化、虚拟 dom、单向数据流、JSX、Hooks 特性(6 个)
1. 声明式编程:重在结果、不在过程,比如 hooks 函数,再比如每个组件只为实现一个功能
2. 组件化:独立可复用
3. 虚拟 dom:优化真实 dom 渲染,跨平台特性
4. 单向数据流:子组件不能直接改变父组件状态,需要回传
5. JSX 语法: JSX 会被 Babel 编译为 React.createElement() 调用,最终生成虚拟 DOM
6. Hooks(React 16.8+ 核心特性):让函数组件拥有完整能力,不只是用于 UI 渲染,也可处理逻辑